<script setup lang="ts">
import type { changePasswordType } from "_s/config/user/type";
// import validate from "_s/common/validate";
import { changePassword } from "_s/config/user";
import common from "_s/common/localstore";
import { encrypt } from "_s/common/crypto";
import { QForm } from "quasar";
const { t } = useI18n();
const { loading, notify } = useQuasar();
const router = useRouter();
const form = ref({} as changePasswordType);

const model = defineModel<boolean>();

const formRules = {
  password: [(val: string) => (val != null && val !== "") || t("login.rules.password"), (val: string) => val.length >= 6 || t("login.rules.passwordLength")],
  newPassword: [
    (val: string) => (val != null && val !== "") || t("login.rules.password"),
    (val: string) => val.length >= 6 || t("login.rules.passwordLength"),
    (val: string) => val !== form.value.oldPassword || t("login.rules.newPasswordNotEqualOld")
  ],
  confirmPassword: [
    (val: string) => (val != null && val !== "") || t("login.rules.password"),
    (val: string) => val.length >= 6 || t("login.rules.passwordLength"),
    (val: string) => val === form.value.newPassword || t("login.rules.confirmPassword")
  ]
};

const formRef = useTemplateRef("formRef") as Ref<InstanceType<typeof QForm>>;
const submit = async () => {
  const validate = await formRef.value.validate();
  if (!validate) return;
  loading.show();
  const { code, msg } = await changePassword({
    oldPassword: encrypt(form.value.oldPassword),
    newPassword: encrypt(form.value.newPassword),
    confirmPassword: encrypt(form.value.confirmPassword)
  });
  loading.hide();
  if (code === 0) {
    notify({
      message: t("login.changePasswordSuccess"),
      type: "success"
    });
    cancel();
    common.setToken("");
    void router.push({ path: "/login" });
  } else {
    notify({
      message: msg,
      type: "error"
    });
  }
};
const cancel = () => {
  model.value = false;
};
</script>
<template>
  <div class="container">
    <q-card
      class="fit q-pa-lg"
      flat
      bordered
    >
      <q-card-section>
        <div class="text-h6">{{ $t("user.changePassword") }}</div>
      </q-card-section>
      <q-card-section>
        <q-form
          ref="formRef"
          class="full-width"
          @keyup.enter.prevent="submit"
          autocomplete="off"
        >
          <div class="row justify-between">
            <q-input
              ref="password"
              v-model="form.oldPassword"
              :rules="formRules.password"
              outlined
              dense
              lazy-rules
              class="input"
              :label="$t('login.password')"
              type="password"
              v-require
            />
          </div>
          <div class="row justify-between">
            <q-input
              ref="newPassword"
              v-model="form.newPassword"
              type="password"
              outlined
              dense
              v-require
              class="input"
              :label="$t('login.newPassword')"
              lazy-rules
              :rules="formRules.newPassword"
            />
            <q-input
              ref="confirmPassword"
              v-model="form.confirmPassword"
              type="password"
              outlined
              dense
              v-require
              class="input"
              :label="$t('login.confirmPassword')"
              lazy-rules
              :rules="formRules.confirmPassword"
            />
          </div>
          <div class="text-center q-mt-lg">
            <q-btn
              unelevated
              color="primary"
              class="btn"
              type="submit"
              :label="$t('pub.submit')"
              @click.prevent="submit"
            />
            <q-btn
              unelevated
              class="q-ml-sm btn"
              outline
              :label="$t('pub.cancel')"
              @click="cancel"
            />
            <!-- v-close-popup -->
          </div>
        </q-form>
      </q-card-section>
    </q-card>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 1050px;
  min-height: 250px;
}
.input {
  width: 220px;
}
.btn {
  width: 100px;
}
</style>
